
// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use "./mixin/mixins.scss" as *;
@use './mixin/function.scss' as *;


@import "common/index.scss";

$e-loading-icon-color: #c8c9cc !default;
	$e-loading-icon-text-margin-left:4px !default;
	$e-loading-icon-text-font-size:14px !default;
	$e-loading-icon-text-line-height:20px !default;
	$e-loading-width:30px !default;
	$e-loading-height:30px !default;
	$e-loading-max-width:100% !default;
	$e-loading-max-height:100% !default;
	$e-loading-semicircle-border-width: 2px !default;
	$e-loading-semicircle-border-color:transparent !default;
	$e-loading-semicircle-border-top-right-radius: 100px !default;
	$e-loading-semicircle-border-top-left-radius: 100px !default;
	$e-loading-semicircle-border-bottom-left-radius: 100px !default;
	$e-loading-semicircle-border-bottom-right-radiu: 100px !default;
	$e-loading-semicircle-border-style: solid !default;
	$e-loading-circle-border-top-right-radius: 100px !default;
	$e-loading-circle-border-top-left-radius: 100px !default;
	$e-loading-circle-border-bottom-left-radius: 100px !default;
	$e-loading-circle-border-bottom-right-radiu: 100px !default;
	$e-loading-circle-border-width:2px !default;
	$e-loading-circle-border-top-color:#e5e5e5 !default;
	$e-loading-circle-border-right-color:$e-loading-circle-border-top-color !default;
	$e-loading-circle-border-bottom-color:$e-loading-circle-border-top-color !default;
	$e-loading-circle-border-left-color:$e-loading-circle-border-top-color !default;
	$e-loading-circle-border-style:solid !default;


		/* #ifndef APP-NVUE */
		@keyframes e-rotate {
			0% {
				transform: rotate(0deg)
			}
		
			to {
				transform: rotate(1turn)
			}
		}
		/* #endif */

@include bem_b(loading-icon) {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: $e-loading-icon-color;
	
		@include bem_e(text) {
			margin-left: $e-loading-icon-text-margin-left;
			font-size: $e-loading-icon-text-font-size;
			line-height: $e-loading-icon-text-line-height;
		}

		
		
	
		@include bem_e(spinner) {
			width: $e-loading-width;
			height: $e-loading-height;
			position: relative;
			/* #ifndef APP-NVUE */
			box-sizing: border-box;
			max-width: $e-loading-max-width;
			max-height: $e-loading-max-height;
			animation: e-rotate 1s linear infinite;
			/* #endif */
			@include bem_m(semicircle){
					border-width: $e-loading-semicircle-border-width;
					border-color: $e-loading-semicircle-border-color;
					border-top-right-radius: $e-loading-semicircle-border-top-right-radius;
					border-top-left-radius: $e-loading-semicircle-border-top-left-radius;
					border-bottom-left-radius: $e-loading-semicircle-border-bottom-left-radius;
					border-bottom-right-radius: $e-loading-semicircle-border-bottom-right-radiu;
					border-style: $e-loading-semicircle-border-style;
			}
			@include bem_m(circle){
					border-top-right-radius: $e-loading-circle-border-top-right-radius;
					border-top-left-radius: $e-loading-circle-border-top-left-radius;
					border-bottom-left-radius: $e-loading-circle-border-bottom-left-radius;
					border-bottom-right-radius: $e-loading-circle-border-bottom-right-radiu;
					border-width: $e-loading-circle-border-width;
					border-top-color: $e-loading-circle-border-top-color;
					border-right-color: $e-loading-circle-border-right-color;
					border-bottom-color: $e-loading-circle-border-bottom-color;
					border-left-color: $e-loading-circle-border-left-color;
					border-style: $e-loading-circle-border-style;
			}
		}
		@include bem_m(vertical){
			flex-direction: column
		}
}
